<template>
  <div class="container-box">
    <!--筛选表单-->
    <div class="tag-form">
      <el-form ref="form" label-width="80px" :inline="true" size="small">
        <el-form-item>
          <el-input v-model="query.wordName" placeholder="请输入词汇名" />
        </el-form-item>
        <el-form-item>
          <el-input v-model="query.description" placeholder="请输入词汇描述" />
        </el-form-item>
        <el-form-item>
          <el-select v-model="query.subject.subjectId" placeholder="请选择学科">
            <el-option
              v-for="(item ) in subjectList"
              :key="item.id"
              :value="item.subjectId"
              :label="item.subjectName"
            />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-input v-model="query.name" placeholder="请输入创建者名" />
        </el-form-item>
        <el-form-item>
          <el-button icon="el-icon-search" type="primary" @click="seacrWord">搜索</el-button>
          <el-button icon="el-icon-refresh" @click="resetSearch">重置</el-button>
        </el-form-item>
      </el-form>
      <el-row type="flex" justify="space-between" class="tool-bar">
        <div>
          <el-button icon="el-icon-plus" type="primary" size="small" plain @click="isShow=true,type='add'">创建</el-button>
        </div>
      </el-row>
    </div>
    <!--操作区域-->

    <!--表单区域-->
    <div class="table-box">
      <el-table :data="list" border stripe>
        <el-table-column type="index" label="序号" />
        <el-table-column prop="id" label="词汇ID" />
        <el-table-column prop="wordName" label="词汇名称" />
        <el-table-column prop="description" label="词汇描述" />
        <el-table-column prop="subject.subjectName" label="所属学科">
          <template slot-scope="{row}">
            <span class="span_button">{{ row.subject.subjectName }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="subject" label="词汇热度">
          <template slot-scope="{row}">
            <span class="span_button">{{ row.wordHot }}%</span>
          </template>
        </el-table-column>
        <el-table-column prop="name" label="创建者">
          <template slot-scope="{row}">
            <span class="span_button">{{ row.name }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="createTime" label="创建时间" />

        <el-table-column label="操作">
          <template slot-scope="{row}">
            <el-button size="small" type="primary" icon="el-icon-edit" circle class="editbtn" @click="editWord(row.id)" />  &nbsp;&nbsp;
            <el-popconfirm title="确定删除吗" @onConfirm="deleteWord((row.id))">
              <el-button slot="reference" size="small" type="danger" icon="el-icon-delete" circle />
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!--分页区域-->
    <div class="page">
      <!-- 三个变量（页码，总数，每页数），两个事件（每页数量切换 ，页码切换） -->
      <el-pagination
        :current-page.sync="query.page"
        :page-sizes="[10, 15, 20, 25]"
        :page-size="query.limit"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        background
        @current-change="currentChange"
        @size-change="limitChange"
      >
        :pager-count="7">
      </el-pagination>
    </div>
    <el-dialog title="添加词汇" :visible.sync="isShow" width="45%" @close="resetClose">
      <el-form ref="form" label-width="120px" size="normal" :model="formData" :rules="rules">
        <el-row type="flex">
          <el-form-item label="词汇名称" prop="wordName">
            <el-input v-model="formData.wordName" style="width:240px" />
          </el-form-item>
          <el-form-item label="创建者" prop="name">
            <el-input v-model="formData.name" style="width:240px" />
          </el-form-item>
        </el-row>

        <el-row type="flex">
          <el-form-item label="所属学科" prop="subject.subjectId">
            <el-select v-model="formData.subject.subjectId" placeholder="请选择学科" style="width:240px">
              <el-option
                v-for="(item,index) in subjectList"
                :key="index"
                :label="item.subjectName"
                :value="item.subjectId"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="热度" prop="wordHot">
            <el-input-number v-model="formData.wordHot" :min="1" :max="55" label="描述文字" />
          </el-form-item>
        </el-row>

        <el-row type="flex">
          <el-form-item label="词汇描述" prop="description">
            <el-input v-model="formData.description" type="textarea" style="width:240px" />
          </el-form-item>
        </el-row>
        <el-row type="flex" justify="center">
          <el-button @click="isShow=false">取消</el-button>
          <el-button v-if="type === 'edit'" type="primary" @click="uploadWord">修改</el-button>
          <el-button v-else type="primary" @click="addWord">新增</el-button>
        </el-row>
      </el-form>
    </el-dialog>
  </div>
</template>
<script>
import moment from 'moment'
import { getAllSubjectApi } from '@/api/subject'
import { getWordApi, addWordApi, deleteWordApi, editWordApi, uploadWordApi } from '@/api/word'
export default {
  data() {
    return {
      type: '',
      isShow: false,
      total: 0,
      // 表格数据
      list: [],
      subjectList: [],
      // 查询参数(请求时携带的参数)
      query: {
        page: 1,
        limit: 10,
        wordName: '',
        subject: { subjectId: '' },
        description: '',
        isCollect: ''
      },
      formData: {
        wordName: '',
        description: '',
        subject: { subjectId: '', subjectName: '' },
        wordHot: '',
        name: '',
        createTime: moment(new Date()).format('YYYY-MM-DD hh:mm:ss')
      },
      rules: {
        wordName: [
          { required: true, message: '词汇名称不能为空', trigger: 'blur' }
        ],
        description: [
          { required: true, message: '请填写描述', trigger: 'blur' }
        ],
        subjectId: [
          { required: true, message: '情绪选择科目名称', trigger: 'blur' }
        ],
        name: [
          { required: true, message: '请输入创建者名', trigger: 'blur' }
        ]
      }
    }
  },
  created() {
    this.getAllSubjectList()
    this.getWordList()
  },
  methods: {
    // 获取列表渲染
    async getWordList() {
      const res = await getWordApi(this.query)
      // console.log(res)
      this.list = res.data.data.list
      this.total = res.data.data.total
    },
    // 获取科目列表渲染
    async getAllSubjectList() {
      const res = await getAllSubjectApi()
      // console.log(res)
      this.subjectList = res.data.data.subJectArr
    },
    // 新增
    async addWord() {
      // console.log(this.subjectList.find(item => item.subjectid * 1 === this.formData.subject.subjectId * 1).subjectname)
      this.formData.subject.subjectName = this.subjectList.find(item => item.subjectId * 1 === this.formData.subject.subjectId * 1).subjectName
      await this.$refs.form.validate()
      await addWordApi(this.formData)
      this.$message.success('新增成功')
      this.getWordList()
      this.isShow = false
    },
    // 删除
    async deleteWord(id) {
      await deleteWordApi({ id })
      if (this.query.page > 1 && this.list.length === 1) this.query.page--
      this.getWordList()
    },
    // 回显
    async editWord(id) {
      this.type = 'edit'
      // console.log(id)
      const res = await editWordApi({ id })
      console.log(res)
      res.data.data.subjectId = res.data.data.subject.subjectId
      // res.data.data.subjectName = res.data.data.subject.subjectName
      this.formData = res.data.data
      this.isShow = true
    },
    // 改
    async uploadWord() {
      this.formData.subject.subjectName = this.subjectList.find(item => item.subjectId * 1 === this.formData.subject.subjectId * 1).subjectName
      await this.$refs.form.validate()
      await uploadWordApi(this.formData)
      this.$message.success('修改成功')
      this.getWordList()
      this.isShow = false
    },
    // 查
    async seacrWord() {
      this.getWordList()
    },

    // 重置弹出框
    resetClose() {
      this.formData = {
        wordName: '',
        description: '',
        subject: { subjectId: '', subjectName: '' },
        wordHot: '',
        name: '',
        createTime: moment(new Date()).format('YYYY-MM-DD hh:mm:ss')
      }
      this.$refs.form.clearValidate()
    },
    // 重置
    resetSearch() {
      this.query = {
        page: 1,
        limit: 10,
        wordName: '',
        description: '',
        subject: { subjectId: '' },
        isCollect: ''
      }
      this.getWordList()
    },
    // 页码变动
    currentChange(value) {
      console.log(value)
      this.query.page = value
      this.getWordList()
    },
    // 每页数量变动
    limitChange(value) {
      this.query.limit = value
      this.getWordList()
    }
  }
}
</script>

<style scoped>
.container-box{
  padding: 30px;
}
.filter-form,
.tool-bar{
  /* border: 1px solid #ddd; */
  padding: 5px 15px 10px;
  margin-bottom: 10px;
}
.tag-form{
  display: flex;
  justify-content: space-between;
}
::v-deep .el-table td, .el-table th.is-leaf{
  text-align: center;
}
.span_button{
  color: #58acfa;
  background-color: #e8f5f7;
  cursor: pointer;
  display: inline-block;
  padding: 1px 8px;
  border: 1px solid #b5d8f8;
  border-radius: 3px;
}
::v-deep .el-table_1_column_1 .cell{
  padding: 0 !important;
  letter-spacing: 2px;
}
::v-deep .is-leaf {
  text-align: center;
}
::v-deep .el-dialog{
  height: 450px;
}
.editbtn{
  margin-right: 10px;
}
</style>
